﻿@{
    ViewBag.Title = "品类销售分析";
}
@section headSection{
    <script src="/Scripts/echarts.js"></script>
    <script src="/Scripts/macarons.js"></script>
}
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 100%; height: 455px; margin: 0 auto;"></div>

<script type="text/javascript">

    var dataName = [];
    var dataData = [];
    function getdata(jsonText) {

        if (typeof (jsonText) == "string") {
            //msgObj = JSON.parse(jsonText);
            try {
                //1.1将字符串 尝试转成 js 对象
                //处理 数组字面量表示法的 json字符串：[{},{}]
                jsonText = eval(jsonText);
            } catch (e) {
                try {
                    //处理 对象字面量表示法的 json字符串:{}
                    jsonText = eval("(" + jsonText + ")");
                } catch (e1) {
                    alert("格式错误：必须为json格式字符串~！");
                }
            }
        }
        for (var i = 0; i < jsonText.length; i++) {
            dataName[i] = jsonText[i].CategoryName;
            dataData[i] = { value: jsonText[i].Total, name: jsonText[i].CategoryName };
        }
    }
    getdata(@Html.Raw(ViewBag.Category));
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'), 'macarons');

    // 显示标题，图例和空的坐标轴
    myChart.setOption({

        title: {
            text: '品类销售分析',
            left: 30,
            top: 30,
            textStyle: { fontSize: 20 }

        },
        legend: {
            x: 'center',
            y: 'bottom',
            data: dataName
        },
        tooltip: {
            trigger: 'item',
            //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
            formatter: "品类名称:{b}<br/>销售量:{c},占({d}%)"
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                magicType: {
                    show: true,
                    type: ['pie', 'funnel']
                },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        series: [
            {
                name: '品类销售',
                type: 'pie',
                radius: '80%',
                center: ['50%', '45%'],
                data: dataData
            }
        ]
    });

</script>
